<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<style>
			body{
				margin-left: 50px;
				margin-top: 30px;
				width: 80%;
				background-color: lightblue;
			}
			table{
				margin-top: 30px;
			}
			label{
				margin-top: 30px;
				margin-right: 20px;
			}
		</style>
		<script src="js/axios.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<h1>商品管理</h1>
		<div id="app">
		<label>
			分类:<select v-model="selectId">
				<option v-for="classify in classifyList" v-bind:value="classify.classifyId">
				 {{classify.classifyName}}
				</option>
			</select>
		</label>
		<label>
			名称：<input v-model="goodsName" />
		</label>
		<label>
			厂家：<input v-model="factory" />
		</label>
		<label>
			品牌：<input v-model="brand" />
		</label>
		<button class="btn btn-primary"
		v-on:click="findGoods()">查询</button>
		<button class="btn btn-warning"
		v-on:click="saveGoods()">新增</button>
		<table class="table table-striped">
			<tr>
				<td>名称</td>
				<td>库存</td>
				<td>价格</td>
				<td>分类</td>
				<td>厂家</td>
				<td>品牌</td>
				<td>更新时间</td>
				<td>操作</td>
			</tr>
			<tr v-for="goods in goodsList">
				<td>{{goods.goodsName}}</td>
				<td>{{goods.stock}}</td>
				<td>{{goods.price}}</td>
				<td>{{goods.classifyName}}</td>
				<td>{{goods.factory}}</td>
				<td>{{goods.brand}}</td>
				<td>{{goods.updateTime}}</td>
				<td>
					<button class="btn btn-danger" v-on:click="deleteGoods(goods.goodsId)">删除</button>
					<button class="btn btn-warning" v-on:click="updateGoods(goods.goodsId)" >更新</button>
					<button class="btn btn-success" v-on:click="sale(goods.goodsId,goods.goodsName)">销售</button>
				</td>
			</tr>
		</table>
		</div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{
				selectId:null,
				goodsList:[],
				classifyList:[],
				goodsName:"",
				factory:"",
			},
			methods:{
				findAll:function(){
					let serverUrl="http://localhost:8088/goods/";
					let vue=this;
					axios.get(serverUrl)
					.then(function(response){
						vue.goodsList=response.data.data.list;
						console.log(response.data)	
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				findClassify:function(){
					let serverUrl="http://localhost:8088/classify/"
					let vue=this;
					axios.get(serverUrl)
					.then(function(response){
						vue.classifyList=response.data.data;
						console.log(response.data)
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
				sale:function(goodsId,goodsName){
					location.href="sale.html"
				},
				saveGoods:function(){
					location.href="addGoods.html"
				},
				updateGoods:function(){
					location.href="updateGoods.html"
				},
				deleteGoods:function(goodsId){
					let result=window.confirm("是否确认删除")
					let serverUrl="http://localhost:8088/goods/"+goodsId;
					console.log(serverUrl);
					let vue=this
					axios.delete(serverUrl)
					.then(function(response){
						window.alert(response.data.data);
						vue.findAll();
					})
					.catch(function(e){
						window.alert("联网失败")
						console.log(e);
					})
				},
			},
			mounted:function(){
				this.findClassify();
				this.findAll();
			}
		}
		var vue =new Vue(config);
	</script>
</html>
